<template>
  <div>
    <template v-if="uploadType === 'file'">
      <div class="dg-uplod-file">
        <el-upload
          style="width:100%"
          drag
          :action="action"
          :limit="limit"
          :multiple="multiple"
          :auto-upload="autoUpload"
          :on-change="handChange"
          :headers="headers"
          :accept="accept"
          :on-preview="onPreview"
          :on-remove="onRemove"
          :on-success="onSuccess"
          :on-error="onError"
          @clearFiles="clearFiles"
          @abort="abort"
          @submit="submit"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">{{tip}}</div>
        </el-upload>
      </div>
    </template>

    <template v-else-if="uploadType === 'image'">
      <el-upload
        action="#"
        list-type="picture-card"
        :limit="limit"
        :auto-upload="false"
       
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file, fileList}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file, fileList)">
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file, fileList)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
    </template>
  </div>
</template>

<script>
export default {
  // name: "file-upload",
  props: {
    uploadType: {
      type: String,
      default: "image",
      validator: val => {
        return ["file", "image"].indexOf(val) !== -1;
      }
    },
    // 请求头头部
    headers: {
      type: Object,
      default: () => {}
    },
    value: {
      type: Array,
      default: () => []
    },
    // 上传文件类型
    accept: {
      type: String,
      default: ""
    },

    // 必选参数，上传的地址
    action: {
      type: String,
      // required: true
      default: ""
    },
    // 最大允许上传个数
    limit: {
      type: Number,
      default: 1
    },
    // 是否支持多选文件
    multiple: {
      type: Boolean,
      default: true
    },
    // 是否在选取文件后立即进行上传
    autoUpload: {
      type: Boolean,
      default: true
      // default: false
    },
    token: {
      type: String,
      default: ""
    },
    tip: {
      type: String,
      default: ""
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      fileList: this.value.map(item => {
        return {
          // key: item.key ? item.key : (new Date().getTime()) + '_' + Math.ceil(Math.random() * 99999),
          uid: item.uid,
          name: item.name,
          // status: item.status ? item.status : 'success'
          url: item.url
        };
      }),
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false
    };
  },
  mounted() {
    this.$emit("input", this.fileList);
  },
  methods: {
    /**
     * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     */
    handChange(file, fileList) {
      this.fileList = fileList.map(item => {
        return {
          uid: item.uid,
          name: item.name,
          url: item.url
        };
      });

      this.$emit("fileUpload", {
        type: "onChange",
        data: {
          file,
          fileList
        }
      });
    },
    // 点击文件列表中已上传的文件时的钩子
    onPreview(file) {
      this.$emit("fileUpload", {
        type: "onPreview",
        data: {
          file
        }
      });
    },

    // 	文件列表移除文件时的钩子
    onRemove(file, fileList) {
      this.$emit("fileUpload", {
        type: "onRemove",
        data: {
          file,
          fileList
        }
      });
    },

    // 文件上传成功时的钩子
    onSuccess(response, file, fileList) {
      console.log("onSuccess response: ", response);
      console.log(" arguments: ", JSON.stringify(fileList));

      sessionStorage.setItem(
        "test_fileupload_success",
        JSON.stringify(fileList)
      );
      this.$emit("fileUpload", {
        type: "onSuccess",
        data: {
          response,
          file,
          fileList
        }
      });
    },

    // 文件上传失败的函数
    onError(error, file, fileList) {
      this.$emit("fileUpload", {
        type: "onError",
        data: {
          error,
          file,
          fileList
        }
      });
    },

    // 清空已上传的文件列表（该方法不支持在 before-upload 中调用
    clearFiles() {
      console.log("clearFiles arguments: ", arguments);
      this.$emit("fileUpload", {
        type: "clearFiles",
        data: arguments
      });
    },

    // abort 取消上传请求
    abort(e) {
      console.log("abort e: ", e);
    },

    // 手动上传文件列表
    submit(e) {
      console.log("submit e: ", e);
    },

    // =================================

    handleRemove(file) {
      console.log(file);
      console.log(' arguments: ', arguments)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(' arguments: ', arguments)
    },
    handleDownload(file) {
      console.log(' arguments: ', arguments)
      console.log(file);
    }
  }
};
</script>



